<!--收银台-->
<template>
  <div class="app-container cashier-container">
    <el-form
      ref="payForm"
      :rules="payRules"
      class="cashier-pay-form"
      :model="payRecord"
      label-position="right"
      label-width="0">
      <div class="title">
        <svg-icon icon-class="iconPayMoney" />
        <span>缴费金额</span>
      </div>
      <div class="cashier-money-list">
        <div v-for="money in moneys" :key="money" class="item" :class="{active:moneySelect===money}" @click="handleFillMoney(money)">{{ money }}<span class="unit">元</span></div>
        <div class="item" :class="{active:moneySelect===0}" @click="handleFillMoney(0)">
          <template v-if="moneySelect===0">
            {{ payRecord.money===0?'自定义':payRecord.money }}
          </template>
          <template v-else>自定义</template>
        </div>
      </div>
      <div class="title">
        <svg-icon icon-class="iconPayMethod" />
        <span>支付方式</span>
      </div>
      <el-form-item>
        <el-radio-group v-model="payRecord.payWay" class="pay-method-radio">
          <el-radio :label="1" border>
            <svg-icon icon-class="iconPayMethodScan" />
            <span>扫码支付</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="tr">
        <el-button type="primary" :disabled="payRecord.money<=0" @click="handleCreateOrder">充值缴费</el-button>
      </el-form-item>
    </el-form>
    <pay ref="pay" title="账号充值" @payNotify="handlePayNotify" />
  </div>
</template>
<script>
import Pay from '@/views/components/pay.vue'

export default {
  components: { Pay },

  data() {
    return {
      moneys: [0.01, 0.1, 0.5, 1, 2, 5, 10, 20, 50],
      moneySelect: null,
      payRecord: {
        payWay: 1,
        money: 0
      }
    }
  },
  created() {
  },
  methods: {
    handleFillMoney(val) {
      this.moneySelect = val
      this.payRecord = {
        ...this.payRecord,
        money: 0
      }
      if (val === 0) {
        this.$prompt('请输入缴费金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入缴费金额',
          inputPattern: /^([0-9]+)$/,
          inputValidator(value) {
            if (value === undefined) {
              return '请输入缴费金额'
            } else if (value * 1 === 0) {
              return '缴费金额不能为0'
            }
          },
          inputErrorMessage: '请正确输入缴费金额'
        }).then(({ value }) => {
          this.payRecord = {
            ...this.payRecord,
            money: value
          }
        }).catch(() => {
        })
      } else {
        this.payRecord = {
          ...this.payRecord,
          money: val
        }
      }
    },
    handleCreateOrder() {
      if (this.payRecord.money <= 0) {
        this.$modal.msgWarning('请选择充值金额')
        return
      }
      this.$store.dispatch('businessCreateRechargeOrder', {
        orderName: '账号充值',
        price: this.payRecord.money
      }).then(response => {
        this.$modal.msgSuccess('订单创建成功,去支付！')
        this.handleDoPay(response)
      }).catch(() => {
      })
    },
    handleDoPay(orderId) {
      this.$nextTick(() => {
        this.$refs.pay.init(orderId)
      })
    },
    handlePayNotify(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped>
  .cashier-container{
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .cashier-pay-form{
      width: 600px;
      margin: 0 auto;
      .title{
        font-size: 16px;
        color: #000000;
        font-weight: bold;
        margin-bottom: 25px;
        svg{
          margin-right: 10px;
        }
      }
      .cashier-money-list{
        display: flex;
        flex-wrap: wrap;
        .item.active{
          background: rgba(24,144,255,0.15);
          border: 1px solid var(--color-primary);
          .unit{
            color: var(--color-primary);
          }
        }
        .item{
          width: 91px;
          height: 44px;
          background: #f6f6f6;
          border-radius: 8px;
          margin-right: 15px;
          margin-bottom: 20px;
          text-align: center;
          line-height: 44px;
          color: var(--color-primary);
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          .unit{
            font-size: 12px;
            color: #999999;
            font-weight: normal;
            margin-left: 5px;
          }
        }
      }
      ::v-deep .el-radio-group.pay-method-radio{
        display: flex;
        flex-direction: column !important;
        .el-radio{
          margin-left: 0px !important;
          margin-right: 0px !important;
          margin-bottom: 10px;
          padding: 0 12px;
          border-radius: 8px;
          height: 32px;
          height: 44px;
          line-height: 44px;
          font-size: 14px;
          display: flex;
          flex-direction: row;
          justify-content: space-between
        }
        .el-radio.is-bordered.is-checked{
          background: rgba(24,144,255,0.15);
        }
        .el-radio__input{
          justify-content: space-evenly;
          display: flex;
          flex-direction: column;
          order: 1;
        }
        .el-radio__label{
          order:0;
          padding: 0px;
          font-size: 14px;
          svg{
            margin-right: 15px;
          }
        }
      }
    }
  }
</style>
